<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
   <div id="app">
      <div>
        <h1 id="mybox">{{msg}}</h1>
        <button @click="change">改变数据</button>
      </div>
   </div>
   <script src="./vue.js"></script>
   <script>
       new Vue({
        el:"#app",
        data(){
          return {
            msg:"你好"
          }
        },
        created(){ //vue实例创建后  不可以操作dom
          //使用场景：如果想在created 内部操作dom 可以加this.$nextTick()
          this.$nextTick(()=>{
               let con=document.getElementById("mybox").innerHTML;
                console.log(con,"^^^^^^")
          })
        },
        methods:{
          change(){
            this.msg="世界"
            // 获取最新的dom的值 
            // vue 自身是异步更新dom的机制导致 无法及时获取更新的dom的内容 
            this.$nextTick(()=>{
              // 面试题
              // this.$nextTick(()=>{}) 异步更新dom完成之后执行 ，在回调内部可以获取更新后的dom
              // 原理是将内部的回调函数放到异步队列中指令
                    let con=document.getElementById("mybox").innerHTML;
                  console.log(con,"------")
            })
        
          }
        }
       })
   </script>
</body>
</html>